<template>
  <div id="bodypage">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/homePage' }"><span id="mainpage">主页</span></el-breadcrumb-item>
      <el-breadcrumb-item>羊群信息</el-breadcrumb-item>
      <el-breadcrumb-item><span>卡片信息</span></el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索区 -->
    <el-form style="display: inline-block;">
      <el-form-item id="searchNum" prop="searchData">
        <el-input placeholder="请输入羊只编号" v-model="searchData.sheepId" clearable style="width: 250px; margin-left: 13%;"
          type="text" @keyup.enter.native="getInfoById"></el-input>
      </el-form-item>
    </el-form>
    <el-button round type="success" slot="append" icon="el-icon-search" style="margin: 10px 0 0 5%;"
      @click="getInfoById">搜索</el-button>
    <el-empty v-if="!cardStatus" :image-size="300"></el-empty>
    <!-- 卡片区 -->
    <div id="cardArea" v-if="cardStatus">
      <div id="titleInfo">
        <h2 style="display: inline-block; width: 100%; height: 30px; text-align: center; margin-right: -90px;">敏盖白绒山羊卡片
        </h2>
        <img style="width: 90px; height: 90px; float: right;" :src="imageStyle" alt="羊只状态显示失败"><br>
      </div>
      <div>
        <div id="headerInfo">
          <div>
            <span style="color: #606266;">个体名称:</span>
            <input type="text" class="headerInfoInput" readonly="readonly" autocomplete="off"
              v-model="tableData1.个体名称"></input>
          </div>
          <div>
            <span style="color: #606266;">园区名称:</span>
            <input type="text" class="headerInfoInput" readonly="readonly" autocomplete="off"
              v-model="tableData1.园区名称"></input>
          </div>
          <div>
            <span style="color: #606266;">户主:</span>
            <input type="text" class="headerInfoInput" readonly="readonly" autocomplete="off"
              v-model="tableData1.户主"></input>
          </div>
        </div>
        <div id="mainerInfo">
          <div class="mainerInfoChild">
            <div style="color: #000; margin-bottom: 10px; font-size: 18px; font-weight: 1000;">基本情况</div>
            <div class="mainerElement">
              <div class="mainerElemenChild all">
                <div class="mainerTitle">品种:</div>
                <input type="text" class="mainerInfoInput1" readonly="readonly" autocomplete="off"
                  v-model="tableData2.品种"></input>
              </div>
              <div class="mainerElemenChild all">
                <div class="mainerTitle">性别:</div>
                <input type="text" class="mainerInfoInput1" readonly="readonly" autocomplete="off"
                  v-model="tableData2.性别"></input>
              </div>
            </div>
            <div class="mainerElement">
              <div class="mainerElemenChild all">
                <div class="mainerTitle">出生日期:</div>
                <input type="text" class="mainerInfoInput1" readonly="readonly" autocomplete="off"
                  v-model="tableData2.出生日期"></input>
              </div>
              <div class="mainerElemenChild all">
                <div class="mainerTitle">级别:</div>
                <input type="text" class="mainerInfoInput1" readonly="readonly" autocomplete="off"
                  v-model="tableData2.级别"></input>
              </div>
            </div>
            <div class="mainerElement">
              <div class="mainerElemenChild all">
                <div class="mainerTitle">年龄:</div>
                <input type="text" class="mainerInfoInput1" readonly="readonly" autocomplete="off"
                  v-model="tableData2.年龄"></input>
              </div>
              <div class="mainerElemenChild all">
                <div class="mainerTitle">出生体重:</div>
                <input type="text" class="mainerInfoInput1" readonly="readonly" autocomplete="off"
                  v-model="tableData2.出生体重"></input>
              </div>
            </div>
            <div class="mainerElement">
              <div class="mainerElemenChild all">
                <div class="mainerTitle">死亡:</div>
                <input type="text" class="mainerInfoInput1" readonly="readonly" autocomplete="off"
                  v-model="tableData2.死亡"></input>
              </div>
              <div class="mainerElemenChild all">
                <div class="mainerTitle">死亡日期:</div>
                <input type="text" class="mainerInfoInput1" readonly="readonly" autocomplete="off"
                  v-model="tableData2.死亡日期"></input>
              </div>
            </div>
            <div class="mainerElement">
              <div class="mainerElemenChild">
                <div class="mainerTitle">订单编号:</div>
                <input type="text" class="mainerInfoInput1" readonly="readonly" autocomplete="off"
                  v-model="tableData2.订单编号"></input>
              </div>
              <div class="mainerElemenChild">
                <div class="mainerTitle">断奶体重:</div>
                <input type="text" class="mainerInfoInput1" readonly="readonly" autocomplete="off"
                  v-model="tableData2.断奶体重"></input>
              </div>
            </div>
          </div>
          <div class="mainerInfoChild">
            <div style="color: #000; height: 10%; font-size: 18px; font-weight: 1000;">系谱信息</div>
            <div class="mainerInfoChildSecondary">
              <div id="individualNum">
                <div class="individualNumStyle">
                  <div class="mainerTitle">个体编号:</div>
                  <input @click="getDetaliInfo('individualNum',$event)" type="text" class="mainerInfoInput2"
                    readonly="readonly" autocomplete="off" v-model="tableData3.个体号"></input>
                </div>
              </div>
              <div id="parentsNum">
                <div class="parentsNumStyle">
                  <div class="mainerTitle">父羊编号:</div>
                  <input @click="getDetaliInfo('fatherNum',$event)" type="text" class="mainerInfoInput2"
                    readonly="readonly" autocomplete="off" v-model="tableData3.父号"></input>
                </div>
                <div class="parentsNumStyle">
                  <div class="mainerTitle">母羊编号:</div>
                  <input @click="getDetaliInfo('motherNum',$event)" type="text" class="mainerInfoInput2"
                    readonly="readonly" autocomplete="off" v-model="tableData3.母号"></input>
                </div>
              </div>
              <div id="grandparentsNum">
                <div class="grandparentsNumStyle">
                  <div class="mainerTitle">祖父编号:</div>
                  <input @click="getDetaliInfo('grandfatherNum',$event)" type="text" class="mainerInfoInput2"
                    readonly="readonly" autocomplete="off" v-model="tableData3.祖父号"></input>
                </div>
                <div class="grandparentsNumStyle">
                  <div class="mainerTitle">祖母编号:</div>
                  <input @click="getDetaliInfo('grandmotherNum',$event)" type="text" class="mainerInfoInput2"
                    readonly="readonly" autocomplete="off" v-model="tableData3.祖母号"></input>
                </div>
                <div class="grandparentsNumStyle">
                  <div class="mainerTitle">外祖父号:</div>
                  <input @click="getDetaliInfo('maternalGrandfatherNum',$event)" type="text" class="mainerInfoInput2"
                    readonly="readonly" autocomplete="off" v-model="tableData3.外祖父号"></input>
                </div>
                <div class="grandparentsNumStyle">
                  <div class="mainerTitle">外祖母号:</div>
                  <input @click="getDetaliInfo('maternalGrandmotherNum',$event)" type="text" class="mainerInfoInput2"
                    readonly="readonly" autocomplete="off" v-model="tableData3.外祖母号"></input>
                </div>
              </div>
            </div>
          </div>
          <div class="mainerInfoChild mainerInfoChildLast" v-if="editStatusPic">
            <div style="color: #000; margin-bottom: 10px; font-size: 18px; font-weight: 1000;">种羊照片</div>
            <el-upload class="upload-demo" drag multiple list-type="picture" :data="{sheepId: tableData3.个体号}"
              :on-error="upError" :on-success="upSuccess" action="/familyWord/upload/uploadFace">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过5M</div>
            </el-upload>
          </div>
          <div class="mainerInfoChild mainerInfoChildLast" v-if="!editStatusPic">
            <div style="color: #000; margin-bottom: 10px; font-size: 18px; font-weight: 1000;">种羊照片</div>
            <div class="demo-image">
              <el-image style="width: 100%; height: 205px" :src="url" fit="fill">
                <div slot="error" class="image-slot"
                  style="display: flex; align-items: center; justify-content: center; height: 100%; font-size: 500%;">
                  <i style="color: #909399; filter: blur(0.5px);" class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
          </div>
        </div>
      </div>
      <div id="footerInfo">
        <div style="color: #000; height: 10%; font-size: 18px; margin-top: 10px; font-weight: 1000;">生产性能信息</div>
        <div id="productionTable">
          <div class="productionTableList">
            <div class="footerTitle">年度:</div>
            <input type="text" class="footerInfoInput footerInfoInputFirstRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[0].年度"></input>
            <input type="text" class="footerInfoInput footerInfoInputSecondRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[1].年度"></input>
            <input type="text" class="footerInfoInput footerInfoInputThirdRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[2].年度"></input>
          </div>
          <div class="productionTableList">
            <div class="footerTitle">体高:</div>
            <input type="text" class="footerInfoInput footerInfoInputFirstRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[0].体高"></input>
            <input type="text" class="footerInfoInput footerInfoInputSecondRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[1].体高"></input>
            <input type="text" class="footerInfoInput footerInfoInputThirdRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[2].体高"></input>
          </div>
          <div class="productionTableList">
            <div class="footerTitle">体长:</div>
            <input type="text" class="footerInfoInput footerInfoInputFirstRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[0].体长"></input>
            <input type="text" class="footerInfoInput footerInfoInputSecondRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[1].体长"></input>
            <input type="text" class="footerInfoInput footerInfoInputThirdRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[2].体长"></input>
          </div>
          <div class="productionTableList">
            <div class="footerTitle">胸围:</div>
            <input type="text" class="footerInfoInput footerInfoInputFirstRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[0].胸围"></input>
            <input type="text" class="footerInfoInput footerInfoInputSecondRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[1].胸围"></input>
            <input type="text" class="footerInfoInput footerInfoInputThirdRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[2].胸围"></input>
          </div>
          <div class="productionTableList">
            <div class="footerTitle">体重:</div>
            <input type="text" class="footerInfoInput footerInfoInputFirstRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[0].体重"></input>
            <input type="text" class="footerInfoInput footerInfoInputSecondRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[1].体重"></input>
            <input type="text" class="footerInfoInput footerInfoInputThirdRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[2].体重"></input>
          </div>
          <div class="productionTableList">
            <div class="footerTitle">绒长度:</div>
            <input type="text" class="footerInfoInput footerInfoInputFirstRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[0].绒长度"></input>
            <input type="text" class="footerInfoInput footerInfoInputSecondRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[1].绒长度"></input>
            <input type="text" class="footerInfoInput footerInfoInputThirdRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[2].绒长度"></input>
          </div>
          <div class="productionTableList">
            <div class="footerTitle">绒细度:</div>
            <input type="text" class="footerInfoInput footerInfoInputFirstRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[0].绒细度"></input>
            <input type="text" class="footerInfoInput footerInfoInputSecondRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[1].绒细度"></input>
            <input type="text" class="footerInfoInput footerInfoInputThirdRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[2].绒细度"></input>
          </div>
          <div class="productionTableList">
            <div class="footerTitle">绒产量:</div>
            <input type="text" class="footerInfoInput footerInfoInputFirstRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[0].绒产量"></input>
            <input type="text" class="footerInfoInput footerInfoInputSecondRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[1].绒产量"></input>
            <input type="text" class="footerInfoInput footerInfoInputThirdRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[2].绒产量"></input>
          </div>
          <div class="productionTableList">
            <div class="footerTitle">等级:</div>
            <input type="text" class="footerInfoInput footerInfoInputFirstRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[0].等级"></input>
            <input type="text" class="footerInfoInput footerInfoInputSecondRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[1].等级"></input>
            <input type="text" class="footerInfoInput footerInfoInputThirdRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[2].等级"></input>
          </div>
          <div class="productionTableList productionTableListLast">
            <div class="footerTitle">备注:</div>
            <input type="text" class="footerInfoInput footerInfoInputFirstRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[0].备注"></input>
            <input type="text" class="footerInfoInput footerInfoInputSecondRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[1].备注"></input>
            <input type="text" class="footerInfoInput footerInfoInputThirdRow" readonly="readonly" autocomplete="off"
              v-model="tableData4[2].备注"></input>
          </div>
        </div>

      </div>
      <div id="footerSaveArea">
        <el-tooltip class="item" effect="dark" content="保存修改信息" placement="top" :enterable="false">
          <el-button @click="saveInfo" type="success" icon="el-icon-document" id="saveButton"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="修改基本信息" placement="top" :enterable="false">
          <el-button @click="edit" type="warning" icon="el-icon-edit" id="saveButton"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="标记死亡羊只" placement="top" :enterable="false">
          <el-button @click="save" type="danger" icon="el-icon-delete" id="saveButton"></el-button>
        </el-tooltip>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        cardStatus: false,
        readonly: 'readonly',
        editStatusPic: false,
        imageStyle: null,
        searchData: {
          sheepId: ''
        },
        error: '暂无图片',
        url: '',
        tableData1: {
          个体名称: '',
          园区名称: '',
          户主: ''
        },
        tableData2: {
          品种: '',
          性别: '',
          出生日期: '',
          级别: '',
          年龄: '',
          出生体重: '',
          死亡: '',
          死亡日期: '',
          订单编号: '',
          断奶体重: ''
        },
        tableData3: {
          个体号: '',
          父号: '',
          母号: '',
          祖父号: '',
          祖母号: '',
          外祖父号: '',
          外祖母号: ''
        },
        tableData4: [{
          个体编号: '',
          年度: '',
          体高: '',
          体长: '',
          胸围: '',
          体重: '',
          绒长度: '',
          绒细度: '',
          绒产量: '',
          等级: '',
          备注: ''
        },
        {
          个体编号: '',
          年度: '',
          体高: '',
          体长: '',
          胸围: '',
          体重: '',
          绒长度: '',
          绒细度: '',
          绒产量: '',
          等级: '',
          备注: ''
        },
        {
          个体编号: '',
          年度: '',
          体高: '',
          体长: '',
          胸围: '',
          体重: '',
          绒长度: '',
          绒细度: '',
          绒产量: '',
          等级: '',
          备注: ''
        }],
      }
    },
    activated() {
      if (this.$store.state.sheepId) {
        this.searchData.sheepId = this.$store.state.sheepId;
        this.getInfoById();
        this.$store.commit("emptySheepId"); //重置vuex里存储的羊只编号
      }
    },
    methods: {
      getDetaliInfo(sheepName, e) {
        // this.$store.commit('transmit', [sheepName, e.target._value])
        // this.$router.push("/basicInfo")
        console.log(sheepName, e.target._value);
        if (e.target._value) {
          this.searchData.sheepId = e.target._value;
          this.getInfoById();
        }else {
          this.$message ({
            type: "info",
            message: "此处没有编号数据,无法查询",
            duration: 3000,
            center: true
          })
        }


      },
      //以羊只编号搜索
      async getInfoById() {
        let { data } = await this.$axios({
          method: 'post',
          url: '/familyWord/find',
          data: {
            sheepId: this.searchData.sheepId,
          }
        })
        //如果获取成功
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: data.msg,
            duration: 2500
          })
        } else {
          //获取失败
          return this.$message({
            type: 'error',
            message: data.msg,
            duration: 2500
          })
        }
        //渲染数据到页面
        this.cardStatus = true;
        if (data.data.data2[0].订单编号) {
          this.imageStyle = require('../../assets/image/sold.png');
        } else if (data.data.data2[0].死亡 == '是') {
          this.imageStyle = require('../../assets/image/dead.png');
        } else {
          this.imageStyle = require('../../assets/image/healthy.png');
        }
        this.tableData1 = data.data.data1[0]
        this.tableData2 = data.data.data2[0]
        this.tableData3 = data.data.data3[0]
        switch (data.data.data4.length) {
          case 1: this.tableData4[0] = data.data.data4[0]; break;
          case 2: this.tableData4[0] = data.data.data4[0]; this.tableData4[1] = data.data.data4[1]; break;
          case 3: this.tableData4[0] = data.data.data4[0]; this.tableData4[1] = data.data.data4[1]; this.tableData4[2] = data.data.data4[2]; break;
        }
      },
      //解除修改限制
      edit() {
        this.editStatusPic = true;
        let inputElement = document.getElementsByTagName('input');
        // for (let index = 0; index < inputElement.length; index++) {
        //   console.log(inputElement[index], index);
        // }
        for (let index = 1; index < 14; index++) {
          if (index != 8 && index != 10 && index != 11 && index != 12) {
            inputElement[index].removeAttribute("readonly");
            inputElement[index].style.backgroundColor = "rgb(241, 241, 241)";
            inputElement[index].style.borderRadius = ".5rem";
          }
        }
      },
      handleClose(done) {
        this.$messagebox.confirm('确认关闭？')
          .then(_ => { done() })
          .catch(_ => { })
      },
      // 上传图片
      upError(err, file, fileList) {
        this.$message.error("上传失败!")
      },
      upSuccess(response, file, fileList) {
        this.$message.sucess("上传成功!")
      },
      //保存修改信息
      async save() {
        //修改基本信息
        console.log(this.tableData3.个体号, this.tableData2.性别, this.tableData2.级别, this.tableData2.品种, this.tableData2.出生日期,);
        let { data } = await this.$axios({
          method: 'post',
          url: '/familyWord/baseInfo/update',
          data: {
            sheepId: this.tableData3.个体号,
            sex: this.tableData2.性别,
            level: this.tableData2.级别,
            variety: this.tableData2.品种,
            birthDate: this.tableData2.出生日期,
            bWeight: this.tableData2.出生体重,
            wWeight: this.tableData2.断奶体重,
          }
        });
      },
      //保存前的确认弹框
      saveInfo() {
        this.$messagebox.confirm('该信息将被保存, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'primary'
        }).then(() => {
          this.save();
          this.$message({ type: 'success', message: '保存成功!' })
          this.getInfoById()
          let inputElement = document.getElementsByTagName('input');
          for (let index = 1; index < 14; index++) {
            if (index != 8 && index != 10 && index != 11 && index != 12) {
              inputElement[index].setAttribute("readonly", "readonly");
              inputElement[index].style.backgroundColor = "transparent";
              inputElement[index].style.borderRadius = "0";
            }
          }
        }).catch(() => {
          this.$message({ type: 'info', message: '已取消保存' })
        })
      }
    }
  }
</script>

<style Lang="less" scoped>
  * {
    color: #4b9100;
  }

  #searchNum>>>.el-input__inner {
    border: 2px solid rgb(75, 152, 207);
    border-radius: 10px;
    color: #000;
  }

  #titleInfo {
    display: flex;
    align-items: center;
    height: 90px;
  }

  #headerInfo {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
  }

  .headerInfoInput {
    outline: transparent;
    border: transparent;
    border-bottom: 1px solid #c0c4cc;
  }

  #mainerInfo {
    display: flex;
    justify-content: space-around;
  }

  #mainerInfo :hover {
    background-color: #f5f9fd;
    transition: 0.3s;
  }

  .mainerElement {
    display: flex;
    justify-content: space-around;
    overflow: hidden;
  }

  .mainerInfoChild {
    width: 33.3%;
    border: 1px solid #c0c4cc;
    border-left: 0;
    padding: 10px;
    text-align: center;
  }

  .mainerInfoChildLast {
    border-right: 0;
  }

  .mainerElemenChild {
    display: inline-block;
  }

  .all {
    display: inline-block;
    margin-bottom: 24px;
  }

  .mainerTitle {
    display: inline-block;
    width: 70px;
    color: #606266;
    font-size: 0.88rem;
  }

  .mainerInfoChildSecondary {
    height: 95%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .mainerInfoInput1 {
    outline: transparent;
    border: transparent;
    border-bottom: 1px solid #c0c4cc;
    background-color: inherit;
    width: 50%;
  }

  .mainerInfoInput2 {
    outline: transparent;
    border: transparent;
    border-bottom: 1px solid #c0c4cc;
    background-color: inherit;
    width: 50%;
  }

  .mainerInfoInput2:hover {
    color: #03a9f4;
    cursor: pointer;
  }

  #parentsNum {
    height: 100%;
    flex-direction: column;
  }

  .parentsNumStyle {
    height: 50%;
    display: flex;
    align-items: center;
  }

  #grandparentsNum {
    height: 100%;
    flex-direction: column;
  }

  .grandparentsNumStyle {
    height: 25%;
    display: flex;
    align-items: center;
  }

  #individualNum {
    height: 100%;
    flex-direction: column;
  }

  .individualNumStyle {
    height: 100%;
    display: flex;
    align-items: center;
  }

  #footerInfo {
    text-align: center;
    height: 150px;
  }

  #productionTable {
    margin-top: 10px;
    border-top: 1px solid #c0c4cc;
    display: flex;
    justify-content: space-around;
    height: 75%;
  }

  .footerInfoInput {
    outline: transparent;
    border: transparent;
    border-bottom: 1px solid #c0c4cc;
    width: 100%;
    display: block;
    height: 29px;
  }

  .productionTableList {
    border-right: solid 1px #c0c4cc;
  }

  .footerTitle {
    font-size: 0.88rem;
    color: #606266;
    border-bottom: #c0c4cc solid 1px;
    padding: 2px;
  }

  .productionTableListLast {
    border-right: 0;
  }

  input {
    text-align: center;
  }

  #footerSaveArea {
    display: flex;
    justify-content: end;
    margin-right: 20px;
  }

  #saveButton {
    width: 6%;
  }

  .footerInfoInputFirstRow:hover,
  .footerInfoInputSecondRow:hover,
  .footerInfoInputThirdRow:hover {
    background-color: #f5f9fd;
    transition: 0.3s;
  }

  #cardArea {
    width: 95%;
    height: 95%;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.267);
    border-radius: 4px;
    padding-bottom: 5px;
  }
</style>